<template>
  <el-select v-if="initData" ref="baseRef" value-key="id" :props="{ children: 'children', label: 'name' }" v-bind="$attrs">
    <template v-for="(value, key) in selectData">
      <el-option :value="key" :label="value" />
    </template>
    <template v-for="(key, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </el-select>
</template>
<script setup>
  import { renderStoreHook } from '@/store/index.ts';

  const renderStore = renderStoreHook();

  const props = defineProps({ renderCode: { type: String }, valueField: { type: String }, displayField: { type: String } });

  const initData = ref(false);

  const selectData = ref({});

  if (props.renderCode && props.valueField && props.displayField) {
    // 组件作为初始请求的一部分被渲染
    renderStore.loadData(['product']).then(() => {
      initData.value = true;
      selectData.value = renderStore.getRenderJson(props.renderCode, props.valueField, props.displayField);
    });
  } else {
    initData.value = true;
  }

  const baseRef = ref();

  // ElTree方法的再次暴露时再mounted后，在某些时候（比如组件初始化的时候）可能不存在，可以使用 ref.value.getTree().value的方式调用
  const getInput = function () {
    return baseRef.value;
  };

  defineExpose({ getInput });
</script>
